iT邦幫忙

2021 iThome 鐵人賽

DAY 6
0
Modern Web

初學者對於做購物車系統的分析系列 第 6

Day 06-製作購物車系統環境之Visual Studio Code

  • 分享至 

  • xImage
  •  

首先先來個小解說。

Visual Studio Code:

簡稱VScode,由微軟開發,是一個多語言(包括:JavaScript、CSS、HTML等)且跨平台的程式編輯器,內建Git控制系統。
功能:
-自動偵錯
-補齊程式碼(例如:打完一串程式碼結尾少加了<;>當你處存時會自動加上。)
-有中文版本/images/emoticon/emoticon02.gif
-支持用戶有個個性化的VScode主題、鍵盤捷徑等
-可在內建下載、擴充功能


來囉!

安裝VScode:

第一步:當然就是進VScode官網進行下載
https://ithelp.ithome.com.tw/upload/images/20210906/20139720vKJfjRAxaK.png
第二步:下載完,接下來就是設定啦
-點擊紅圈
https://ithelp.ithome.com.tw/upload/images/20210907/20139720b24eeWfk54.png
-搜所Live Server,並下載(圖一)
!小補充!
Live Server,此功能在做HTML時很有用(對著HTML檔案右鍵,點擊open with live server),則馬上跑出一個臨時網站。如圖二,推薦指數4.5
圖一
https://ithelp.ithome.com.tw/upload/images/20210907/20139720lm1GGkqAoO.png
圖二
https://ithelp.ithome.com.tw/upload/images/20210907/20139720RmlthcY8f7.png

-搜尋Prettier,並下載
!小補充!
Prettier,讓你的程式碼看起來整潔、漂亮(像他的名字一樣XD),也是非常熱門的擴充功能。推薦指數4
https://ithelp.ithome.com.tw/upload/images/20210907/20139720z93xDfF4im.png


VScode官網:https://code.visualstudio.com/
推薦下載擴充VScode裡面常用的功能:https://www.youtube.com/watch?v=qz0aGYrrlhU
(初學者友善,順便教學HTML)


  • 明天要說安裝Node.js /images/emoticon/emoticon29.gif

上一篇
Day 05-選擇React & Redux
下一篇
Day 07-製作購物車系統環境之Node.js
系列文
初學者對於做購物車系統的分析30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言